import React, { useState } from 'react';
import * as styles from './index.module.less'
import Board from './Board'

export default function Game() {
    const [history, setHistory] = useState([Array(9).fill(null)]);
    const [currentMove, setCurrentMove] = useState(0);
    const xIsNext = currentMove % 2 === 0;
    const currentSquares = history[currentMove];

    function handlePlay(nextSquares) {
        const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
        setHistory(nextHistory);
        setCurrentMove(nextHistory.length - 1);
    }

    function jumpTo(nextMove) {
        setCurrentMove(nextMove);
    }

    const moves = history.map((squares, move) => {
        let description;
        if (move > 0) {
            description = 'Go to move #' + move;
        } else {
            description = 'Go to game start';
        }
        return (
            <li key={move}>
                <button className='text-red' onClick={() => jumpTo(move)} >{description}</button>
            </li>
        );
    });

    return (
        <div className={styles.game}>
            <div className={styles.main}>
                <div className={styles['board-row']}>
                    <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
                </div>
                <div className={styles["game-info"]}>
                    <ol>{moves}</ol>
                </div>
            </div>

        </div>
    );
}